<div class="row align-items-center justify-content-between">
  <div class="col-md-auto col-sm-auto">
    <div class="content-header">
      <h1 *ngIf="!isEditMode">添加用户</h1>
      <h1 *ngIf="isEditMode">编辑用户</h1>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-12">
    <form [formGroup]="userForm">
      <div class="box box-primary">
        <div class="box-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group ">
                <label>姓</label>
                <input formControlName="firstName" class="form-control" type="text">
                <div *ngIf="userForm.get('firstName').touched && userForm.get('firstName').errors">
                  <div class="text-danger" *ngIf="userForm.get('firstName').errors?.required">
                    姓名不能为空.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group ">
                <label>名</label>
                <input formControlName="lastName" class="form-control" type="text">
                <div *ngIf="userForm.get('lastName').touched && userForm.get('lastName').errors">
                  <div class="text-danger" *ngIf="userForm.get('lastName').errors?.required">
                    姓名不能为空.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group ">
                <label>手机号</label>
                <input formControlName="phoneNumber" class="form-control" type="number">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>邮箱</label>
                <input [attr.disabled]="isEditMode ? '' : null" formControlName="email" class="form-control"
                  type="email">
                <div *ngIf="userForm.get('email').touched && userForm.get('email').errors">
                  <div class="text-danger" *ngIf="userForm.get('email').errors?.required">
                    邮箱不能为空.
                  </div>
                  <div class="text-danger" *ngIf="userForm.get('email').errors?.email">
                    请输入有效的邮箱地址.
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="!isEditMode" class="col-md-6">
              <div class="form-group">
                <label>密码</label>
                <input autocomplete="new-password" formControlName="password" class="form-control" type="password">
                <div *ngIf="userForm.get('password').touched && userForm.get('password').errors">
                  <div class="text-danger" *ngIf="userForm.get('password').errors?.required">
                    密码不能为空.
                  </div>
                  <div class="text-danger" *ngIf="userForm.get('password').errors?.minlength">
                    您必须输入至少6位数字
                  </div>
                </div>
              </div>
            </div>
            <div *ngIf="!isEditMode" class="col-md-6">
              <div class="form-group">
                <label>确认密码</label>
                <input autocomplete="new-password" formControlName="confirmPassword" class="form-control"
                  type="password">
                <div *ngIf="userForm.get('confirmPassword').touched && userForm.get('confirmPassword').errors">
                  <div class="text-danger" *ngIf="userForm.get('confirmPassword').errors?.required">
                    确认密码不能为空.
                  </div>
                </div>
                <div class="text-danger"
                  *ngIf="userForm.get('confirmPassword').touched && userForm.hasError('notSame')">
                  密码不匹配.
                </div>
              </div>
            </div>
            <div class="form-group col-md-6 status-switch">
              <mat-slide-toggle formControlName="isActive" class="mr-4">
                <span *ngIf="userForm.get('isActive').value">有效</span>
                <span *ngIf="!userForm.get('isActive').value">无效</span>
              </mat-slide-toggle>

              <mat-slide-toggle formControlName="isAdmin">
                <span *ngIf="userForm.get('isAdmin').value">是管理员</span>
                <span *ngIf="!userForm.get('isAdmin').value">非管理员</span>
              </mat-slide-toggle>
            </div>
            <div class="form-group col-md-6">
              <div class="form-group">
                <label>地址</label>
                <textarea formControlName="address" class="form-control"></textarea>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-12">
                <h5>访问权限</h5>
              </div>
            </div>
            <div formGroupName="userClaims" class="form-group row">
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isFolderCreate"
                  [disabled]="userForm.get('isAdmin').value">
                  创建文件夹/上传文件夹
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isFileUpload"
                  [disabled]="userForm.get('isAdmin').value">
                  文件上传
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isDeleteFileFolder"
                  [disabled]="userForm.get('isAdmin').value">
                  删除文件/文件夹
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isSharedFileFolder"
                  [disabled]="userForm.get('isAdmin').value">
                  共享文件/文件夹
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isSendEmail"
                  [disabled]="userForm.get('isAdmin').value">
                  发送邮件
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isRenameFile"
                  [disabled]="userForm.get('isAdmin').value">
                  重命名文件/文件夹
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isDownloadFile"
                  [disabled]="userForm.get('isAdmin').value">
                  下载文件/文件夹
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isCopyFile"
                  [disabled]="userForm.get('isAdmin').value">
                  拷贝文件
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isCopyFolder"
                  [disabled]="userForm.get('isAdmin').value">
                  拷贝文件夹
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isMoveFile"
                  [disabled]="userForm.get('isAdmin').value">
                  移动文件/文件夹
                </mat-slide-toggle>
              </div>
              <div class="col-sm-2">
                <mat-slide-toggle class="example-margin" [color]="color" formControlName="isSharedLink"
                  [disabled]="userForm.get('isAdmin').value">
                  共享文件链接
                </mat-slide-toggle>
              </div>
            </div>
            <div class="m-top-10 col-md-12">
              <ng-container *ngIf="isEditMode">
                <button class="btn btn-success btn-sm m-right-10" (click)="saveUser()" cdkFocusInitial><i
                    class="fas fa-save"></i> 保存</button>
              </ng-container>
              <ng-container *ngIf="!isEditMode">
                <button class="btn btn-success btn-sm m-right-10" (click)="saveUser()" cdkFocusInitial><i
                    class="fas fa-save"></i> 保存</button>
              </ng-container>
              <button type="button" class="btn btn-danger btn-sm" [routerLink]="['/admin']"><i
                  class="fas fa-times-circle"></i>
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="loading-shade" *ngIf="isLoading">
  <mat-spinner></mat-spinner>
</div>
